<style>
* {
  margin: 0;
  padding: 0;
}
</style>

<template>
  <div class="homepage" style="width: 90%">
    <p>实时数据&nbsp;&nbsp;<font size="0px;" color="gray">数据更新时间：{{now}}</font></p>

    <!--    统计数量-->
    <div style="width: 1400px;height: 100px;margin-top: 15px;margin-bottom: 15px">
      <!--      订单-->

      <div style="width: 300px;height: 100px;background-color: red;border-radius: 6px;margin-right: 10px;float: left">
        <div style="width: 295px;height: 100px;background-color: white;border-radius: 6px;margin-left: 5px">
          <p style="padding-top: 15px;padding-left: 15px;float: left"><font size="1" color="red">今日完成订单</font><br>
            <font size="5">{{ orderNum }}</font><br>
            <font size="1" color="gray">昨日{{ YesterdayOrderNum }}</font>
          </p>
          <font size="10px" color="#a9a9a9"><i style="float: right;margin-top: 25px;margin-right: 13px"
                                               class="el-icon-document"></i></font>
        </div>
      </div>

      <!--      用户-->
      <router-link to="user" tag="div">
      <div
          style="width: 300px;height: 100px;background-color: #ffbf00;border-radius: 6px;margin-right: 10px;float: left">
        <div style="width: 295px;height: 100px;background-color: white;border-radius: 6px;margin-left: 5px">
          <p style="padding-top: 15px;padding-left: 15px;float: left"><font size="1" color="red">本周新增用户</font><br>
            <font size="5">{{ personNum }}</font><br>
            <font size="1" color="gray" style>昨日{{ YesterdayPersonNum }}</font>
          </p>
          <font size="10px" color="#a9a9a9"><i style="float: right;margin-top: 27px;margin-right: 13px"
                                               class="el-icon-user"></i></font>
        </div>
      </div>
      </router-link>
      <!--      店铺-->
      <router-link to="shops" tag="div">
      <div
          style="width: 300px;height: 100px;background-color: #9900ff;border-radius: 6px;margin-right: 10px;float: left">
        <div style="width: 295px;height: 100px;background-color: white;border-radius: 6px;margin-left: 5px">
          <div style="width: 295px;height: 100px;background-color: white;border-radius: 6px;margin-left: 5px">
            <p style="padding-top: 15px;padding-left: 15px;float: left"><font size="1"
                                                                              color="red">本周入驻店铺</font><br>
              <font size="5">{{ ShopNum }}</font><br>
              <font size="1" color="gray" style>昨日{{ YesterDayShopNum }}</font>
            </p>
            <font size="10px" color="#a9a9a9"><i style="float: right;margin-top: 27px;margin-right: 13px"
                                                 class="el-icon-sell"></i></font>
          </div>
        </div>
      </div>
      </router-link>
      <!--      外卖员-->
      <router-link to="couriers" tag="div">
      <div
          style="width: 300px;height: 100px;background-color: #f19b9b;border-radius: 6px;margin-right: 10px;float: left">
        <div style="width: 295px;height: 100px;background-color: white;border-radius: 6px;margin-left: 5px">
          <p style="padding-top: 15px;padding-left: 15px;float: left"><font size="1"
                                                                            color="red">本周招募配送员</font><br>
            <font size="5">{{ CouriersNum }}</font><br>
            <font size="1" color="gray" style>昨日{{ YesterDayCouriersNum }}</font>
          </p>
          <font size="10px" color="#a9a9a9"><i style="float: right;margin-top: 27px;margin-right: 13px"
                                               class="el-icon-bicycle"></i></font>
        </div>
      </div>
      </router-link>
    </div>


    <!--    快捷工具-->
    <p>快捷工具</p>
    <div
        style="width: 1300px;height: 100px;margin-top: 15px;margin-bottom: 15px;border-radius: 6px;background-color: aqua">
      <div
          style="width: 1295px;height: 100px;border-radius: 6px;margin-right: 10px;margin-left: 5px;background-color: white;padding-left: 15px">

        <!--        发布平台通知-->
        <div style="float: left; width: 120px;height: 100px;text-align: center" align=" center">
         <router-link to="pttz" tag="div">
           <font size="9px" color="#6495ed"><i style="margin-top: 16px;margin-bottom: 5px"
                                               class="el-icon-mobile-phone"></i></font><br>
           <p><font size="1">发布平台通知</font></p>
         </router-link>
        </div>

        <!--        发布广告投放-->
        <div style="float: left; width: 120px;height: 100px;text-align: center" align=" center">
          <router-link to="ggtf"  tag="div">
            <font size="9px" color="#6495ed"><i style="margin-top: 16px;margin-bottom: 5px"
                                                class="el-icon-money"></i></font><br>
            <p><font size="1">发布广告投放</font></p>
         </router-link>

        </div>

        <!--        发布报名活动-->
        <div style="float: left; width: 120px;height: 100px;text-align: center" align=" center">
          <font size="9px" color="#6495ed"><i style="margin-top: 16px;margin-bottom: 5px"
                                              class="el-icon-tickets"></i></font><br>
          <p><font size="1">发布报名活动</font></p>
        </div>

        <!--        发布平台活动-->
        <div style="float: left; width: 120px;height: 100px;text-align: center" align=" center">
          <font size="9px" color="#6495ed"><i style="margin-top: 16px;margin-bottom: 5px"
                                              class="el-icon-bell"></i></font><br>
          <p><font size="1">发布平台活动</font></p>
        </div>

        <!--        添加配送站-->
        <div style="float: left; width: 120px;height: 100px;text-align: center" align=" center">
          <router-link to="addDBS" tag="div">
            <font size="9px" color="#6495ed"><i style="margin-top: 16px;margin-bottom: 5px"
                                                class="el-icon-sell"></i></font><br>
            <p><font size="1">添加配送站</font></p>
          </router-link>
        </div>

        <!--        添加配送员-->
        <div style="float: left; width: 120px;height: 100px;text-align: center" align=" center">
          <router-link to="couriers" tag="div">
            <font size="9px" color="#6495ed"><i style="margin-top: 16px;margin-bottom: 5px"
                                                class="el-icon-bicycle"></i></font><br>
            <p><font size="1">添加配送员</font></p>
          </router-link>
        </div>

        <!--        添加常见问题-->
        <div style="float: left; width: 120px;height: 100px;text-align: center" align=" center">
        <router-link to="yjfk" tag="div">
          <font size="9px" color="#6495ed"><i style="margin-top: 16px;margin-bottom: 5px"
                                              class="el-icon-warning-outline"></i></font><br>
          <p><font size="1">添加常见问题</font></p>
        </router-link>
        </div>

        <!--        添加恶劣天气-->
        <div style="float: left; width: 120px;height: 100px;text-align: center" align=" center">
          <font size="9px" color="#6495ed"><i style="margin-top: 16px;margin-bottom: 5px"
                                              class="el-icon-heavy-rain"></i></font><br>
          <p><font size="1">添加恶劣天气</font></p>
        </div>

        <!--        添加敏感词-->
        <div style="float: left; width: 120px;height: 100px;text-align: center" align=" center">
          <font size="9px" color="#6495ed"><i style="margin-top: 16px;margin-bottom: 5px"
                                              class="el-icon-document-copy"></i></font><br>
          <p><font size="1">添加恶劣天气</font></p>
        </div>

        <!--        添加子账号-->
        <div style="float: left; width: 120px;height: 100px;text-align: center" align=" center">
      <router-link to="zzhgl" tag="div">
        <font size="9px" color="#6495ed"><i style="margin-top: 16px;margin-bottom: 5px"
                                            class="el-icon-user"></i></font><br>
        <p><font size="1">添加子账号</font></p>
         </router-link>
        </div>
      </div>
    </div>

    <!--    今日代办，流量分析-->
    <div style="width: 1300px;height: 500px;">
      <!--      今日代办统计-->
      <div style="float: left;width: 400px;height: 500px;background-color: white">
        <p>今日待办<font size="1px;" color="red">{{dbcount}}</font></p>
        <div id="db" style="width: 380px;height: 476px;background-color: white;">

        </div>
      </div>

      <!--      流量分析-->
      <div style="float: left;width: 885px;height: 500px;background-color: white;margin-left: 15px">
        <p>流量分析</p>
        <div id="ll" style="width: 885px;height: 476px;padding: 10px">
          <p><font size="2px">消费端访客数</font><font size="1px" color="#a9a9a9">（统计时间：111{{now}}）</font></p>
        </div>
      </div>
    </div>


    <!--    交易分析-->
    <p>交易分析</p>
    <div style="width: 1300px;height: 380px;">
      <div id="jy" style="width: 850px;height: 380px;background-color: white;float: left">

      </div>
      <!--      漏斗图-->
      <div id="" style="width: 378px;height: 370px;float: left;margin-left: 15px">
        <img src="https://spyx-yy.oss-cn-beijing.aliyuncs.com/2024-10-16/1.png" width="400px" style="margin-top: 80px;padding-right: 50px">
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';


export default {
  data() {
    return {
      dbcount:0,
      orderNum: "77,051",
      YesterdayOrderNum: "66,051",
      personNum: "4,000",
      YesterdayPersonNum: "3,000",
      ShopNum: "1,000",
      YesterDayShopNum: "900",
      CouriersNum: "1,000",
      YesterDayCouriersNum: "900",
      now:null,
    }
  },
  mounted() {
    this.db();
    this.ll();
    this.jy();
  //   获取今天完成的订单数量
    this.tjOrder();
  //   获取昨天完成的订单数量
    this.ztOrder();

  //   统计本周新增用户
    this.tjPerson();
  //   统计昨天新增用户
    this.ztPerson();


  //   统计本周新增的店铺
    this.tjShop();
  //   统计昨天新增的店铺
    this.ztShop();

  //   统计本周招募的配送员
    this.tjCouriers();
  //   统计昨天招募的配送员
    this.ztCouriers();
  },
  created() {

  },
  methods: {
    // 获取今日完成订单的数量
    tjOrder(){
      this.axios.get(`http://localhost:8000/xm-trade/order/findAllOrder`).then(res=>{
        if (res.data!=null) {
          this.orderNum = res.data.data;
        } else {
          this.$message({
            message: '查询失败',
            type: 'error'
          })
        }
      })
      this.now=new Date();
    },
    //  获取昨天完成的订单数量
    ztOrder(){
      this.axios.get(`http://localhost:8000/xm-trade/order/findAllOrder2`).then(res=>{
        if (res.data!=null) {
          this.YesterdayOrderNum = res.data.data;
        } else {
          this.$message({
            message: '查询失败',
            type: 'error'
          })
        }
      })
      this.now=new Date();
    },

    // 统计本周新增用户
    tjPerson(){
      this.axios.get(`http://localhost:8000/xm-client/xm-user/findAllUser`).then(res=>{
        if (res.data!=null) {
          this.personNum = res.data.data;
        } else {
          this.$message({
            message: '查询失败',
            type: 'error'
          })
        }
      })
      this.now=new Date();
    },

    // 统计昨天新增用户
    ztPerson(){
      this.axios.get(`http://localhost:8000/xm-client/xm-user/findAllUser2`).then(res=>{
        if (res.data!=null) {
          this.YesterdayPersonNum = res.data.data;
        } else {
          this.$message({
            message: '查询失败',
            type: 'error'
          })
        }
      })
    },

    // 统计本周新增的店铺
    tjShop(){
      this.axios.get(`http://localhost:8000/xm-client/xm-settled/findAllSettled`).then(res=>{
        if (res.data!=null) {
          this.ShopNum = res.data.data;
        } else {
          this.$message({
            message: '查询失败',
            type: 'error'
          })
        }
      })
    },

    // 统计昨天新增的店铺
    ztShop(){
      this.axios.get(`http://localhost:8000/xm-client/xm-settled/findAllSettled2`).then(res=>{
        if (res.data!=null) {
          this.YesterDayShopNum = res.data.data;
        } else {
          this.$message({
            message: '查询失败',
            type: 'error'
          })
        }
      })
    },

    // 统计本周招募的配送员
    tjCouriers(){
      this.axios.get(`http://localhost:8000/xm-client/xm-couriers/findAllCourier`).then(res=>{
        if (res.data!=null) {
          this.CouriersNum = res.data.data;
        } else {
          this.$message({
            message: '查询失败',
            type: 'error'
          })
        }
      })
    },

    // 统计昨天招募的配送员工
    ztCouriers(){
      this.axios.get(`http://localhost:8000/xm-client/xm-couriers/findAllCourier2`).then(res=>{
        if (res.data!=null) {
          this.YesterDayCouriersNum = res.data.data;
        } else {
          this.$message({
            message: '查询失败',
            type: 'error'
          })
        }
      })
    },

    //   统计待办方法
    db() {
      var dbDom = document.getElementById('db');
      var dbChart = echarts.init(dbDom);
      var option;

      option = {
        grid: {
          left: 100 // 增加左侧内边距
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show: false // 隐藏y轴网格线
          }
        },
        yAxis: {
          type: 'category',
          data: ['异常订单', '意见反馈待处理', '商家举报待处理', '团购活动待审核', '评价待审核', '商品待审核', '骑手招募待审核', '店铺信息待审核', '用户信息待审核'],

        },
        series: [
          {
            data: [],
            type: 'bar'
          },
        ],
        tooltip: {
          trigger: 'axis', // 以坐标轴的触发类型显示提示框
          axisPointer: {
            type: 'shadow' // 提示框指针类型
          },
          formatter: function (params) {
            // 自定义提示框内容
            return params[0].name + ': ' + params[0].value;
          }
        }
      };
      this.axios.post(`http://localhost:8000/xm-client/xm-user/countStatus`).then(res=>{
        option.series[0].data=[];
        option.series[0].data = res.data.data;
        for(var i=0;i<res.data.data.length;i++){
          this.dbcount=this.dbcount+res.data.data[i];
        }
        dbChart.setOption(option);
      })

    },

    //   流量统计方法
    ll() {
      var llDom = document.getElementById('ll');
      var llChart = echarts.init(llDom);
      var option;

      option = {
        xAxis: {
          type: 'category',
          data: ['4-10', '4-15', '4-20', '4-25', '4-30', '4-35', '4-40']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ],
        graphic: {
          elements: [
            {
              type: 'text',
              left: 'left', // 水平居中
              top: '2%',    // 距离顶部10%的位置
              style: {
                text: '消费端访客数',
                fontSize: 13,
                fontWeight: 'bold',
                fill: '#333'
              }
            },
            {
              type: 'text',
              left: '8.5%', // 水平居中
              top: '2.5%',    // 距离顶部10%的位置
              style: {
                text: `（统计时间：${new Date()}）`,
                fontSize: 10,
                fontWeight: 'bold',
                fill: '#333'
              }
            }
          ]
        }
      };

      llChart.setOption(option);

    },

    //   交易分析方法
    jy() {
      var jyDom = document.getElementById('jy');
      var jyChart = echarts.init(jyDom);
      var option;

      var dates = ['04-18', '04-21', '04-24', '04-27', '04-30', '05-03', '05-06', '05-09', '05-12', '05-15', '05-16', '05-18', '05-19', '05-20', '05-21', '05-22', '05-23', '05-24', '05-25', '05-26'];
      var takeout_orders = [40000, 45000, 50000, 40000, 35000, 40000, 45000, 40000, 35000, 40000, 35000, 45000, 40000, 35000, 40000, 35000, 15000, 20000, 15000, 20000];
      var pickup_orders = [20000, 15000, 10000, 15000, 20000, 15000, 10000, 15000, 20000, 15000, 15000, 20000, 15000, 20000, 15000, 15000, 20000, 15000, 20000, 15000];
      var group_orders = [10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 10000, 15000, 20000, 15000, 20000];

      // 配置项
      option = {
        xAxis: {
          type: 'category',
          data: dates
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '外卖',
            type: 'bar',
            data: takeout_orders,
            stack: 'total' // 添加stack属性，指定堆叠组为total
          },
          {
            name: '自取',
            type: 'bar',
            data: pickup_orders,
            stack: 'total' // 添加stack属性，指定堆叠组为total
          },
          {
            name: '团购',
            type: 'bar',
            data: group_orders,
            stack: 'total' // 添加stack属性，指定堆叠组为total
          }
        ],
        graphic: {
          elements: [
            {
              type: 'text',
              left: 'left', // 水平居中
              top: '5%',    // 距离顶部10%的位置
              style: {
                text: '消费端顶单量',
                fontSize: 13,
                fontWeight: 'bold',
                fill: '#333'
              }
            },
            {
              type: 'text',
              left: '8.5%', // 水平居中
              top: '5.5%',    // 距离顶部10%的位置
              style: {
                text: `（统计时间：${new Date()}）`,
                fontSize: 10,
                fontWeight: 'bold',
                fill: '#333'
              }
            }
          ]
        }
      };

      // 使用刚指定的配置项和数据显示图表
      jyChart.setOption(option);
    },

  }
}
</script>
